<template>
  <div class="good">
    <div class="goods-title">
      <slot name="title"></slot>
    </div>
    <ul class="good-box">
      <router-link
        class="good-item"
        v-for="item in GoodList"
        :to="`/detail/${item.goodsId}`"
        tag="li"
        :key="item.goodsId">
        <div class="good-img">
          <img :src="$filters.prefix(item.goodsCoverImg)" :alt="item.goodsCoverImg" />
        </div>
        <div class="good-title-price">
          <van-text-ellipsis rows="2" class="good-title" :content="item.goodsName" />
          <div class="good-price">￥{{ item.sellingPrice }}</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script setup>
  let props = defineProps({
    GoodList: {
      type: Array,
      default: [],
    },
  })
</script>

<style scoped lang="less">
  .good {
    .goods-title {
      font-size: 22px;
      color: #00a6a4;
      text-align: center;
      background-color: #f8f8f8;
      padding: 10px;
    }
    .good-box {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // background-color: #f8f8f8;
      .good-item {
        width: 50%;
        // margin: 2px 1px;
        border: 2px solid #f8f8f8;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 14px;
        background-color: #fff;
        .good-img {
          img {
            width: 100%;
            height: 200px;
          }
        }
        .good-title-price {
          padding: 0 3px;
          .good-title {
            color: black;
          }
          .good-price {
            color: red;
          }
        }
      }
    }
  }
</style>
